<template>
  <div>
    <el-group-title class="d_jump">
      <template slot="groupTitle">
        <el-form
          :model="form"
          ref="form"
          label-width="160px"
          class="ccui-form"
          :rules="rules"
        >
          <el-row>
            <el-col :span="13">
              <el-form-item label="冲销原因：" prop="writeoffReason">
                <el-input
                  class="remarkClass"
                  resize="both"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入冲销原因"
                  maxlength="1000"
                  show-word-limit
                  v-model="form.writeoffReason"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="填报单位：" prop="reportInOrgName">
                <el-select
                  v-model="form.reportInOrgName"
                  placeholder="请选择填报单位"
                  @change="changeReportInOrgId"
                >
                  <el-option
                    v-for="item in reportOptions"
                    :key="item.orgId"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="部门：" prop="department">
                <el-input
                  v-model="form.department"
                  placeholder="请输入部门"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="冲销类型：" prop="writeOffType">
                <el-input
                  v-model="form.writeOffType"
                  placeholder="请输入冲销类型"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          
            <el-col :span="12">
              <el-form-item label="供应商：" prop="supplierName">
                <el-input
                  v-model="form.supplierName"
                  placeholder="请输入供应商"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="冲销单编号：" prop="writeoffCode">
                <el-input
                  v-model="form.writeoffCode"
                  placeholder="请输入冲销单编号"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="冲销单名称：" prop="writeroffName">
                <el-input
                  v-model.trim="form.writeroffName"
                  placeholder="请输入冲销单名称"
                  maxlength="300"
                  @blur="handleTrim('writeroffName')"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="入库单编号：" prop="storageCode">
                <el-row class="el-col-20" :gutter="20">
                  <el-col :span="17">
                    <el-input
                      v-model="form.storageCode"
                      placeholder="请选择入库单编号"
                      disabled
                    ></el-input>
                  </el-col>
                  <el-col :span="3">
                    <stockInOrder
                      :reportInOrgId="form.reportInOrgId"
                      @inventoryConfirm="codeNumberInventoryConfirm"
                    ></stockInOrder>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="入库单名称：" prop="storageName">
                <el-input
                  v-model="form.storageName"
                  placeholder="请输入入库单名称"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="结算单编号：" prop="settlementCode">
                <el-input
                  v-model="form.settlementCode"
                  placeholder="请输入结算单编号"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="结算单名称：" prop="settlementName">
                <el-input
                  v-model="form.settlementName"
                  placeholder="请输入结算单名称"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="仓库：" prop="warehouseName">
                <el-input
                  v-model="form.warehouseName"
                  placeholder="请输入仓库"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="物资来源：" prop="materialForm">
                <el-input
                  v-model="form.materialForm"
                  placeholder="请输入物资来源"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="计税方式：" prop="valoremMethod">
                <el-input
                  v-model="form.valoremMethod"
                  placeholder="请输入计税方式"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="本位币币种：" prop="standardMoney">
                <el-input
                  v-model="form.standardMoney"
                  placeholder="请输入本位币币种"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="冲销数量：" prop="writeoffCount">
                <el-input
                  v-model="form.writeoffCount"
                  placeholder="请输入冲销数量"
                  @keyup.native="
                    form.writeoffCount = oninput(form.writeoffCount)
                  "
                  @blur="getblur(form.writeoffCount)"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="冲销金额：" prop="writeoffMoney">
                <el-input
                  v-model="form.writeoffMoney"
                  placeholder="请输入冲销金额"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="编制人：" prop="reportUsername">
                <el-input
                  v-model="form.reportUsername"
                  placeholder="请输入编制人"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="编制日期：" prop="reportTime">
                <el-input
                  v-model="form.reportTime"
                  placeholder="请输入编制日期"
                  disabled
                ></el-input>
                <!-- <el-date-picker
                  v-model="form.reportTime"
                  type="date"
                  placeholder="请选择编制日期"
                  format="yyyy-MM-dd"
                  readonly
                >
                </el-date-picker> -->
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="13">
              <el-form-item label="业务事由：" prop="businessReasons">
                <el-input
                  class="remarkClass"
                  resize="both"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入业务事由"
                  maxlength="400"
                  show-word-limit
                  v-model="form.businessReasons"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="13">
              <el-form-item label="备注：" prop="remark">
                <el-input
                  class="remarkClass"
                  resize="both"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入备注"
                  maxlength="1000"
                  show-word-limit
                  v-model="form.remark"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </el-group-title>
  </div>
</template>

<script>
import stockInOrder from "@/app/inventoryManagement/components/stockInOrder";
import { getFinStorageById } from "../../../financeWarehousing/api/edit-item";
import { getUserInfo, getReportInOrgData } from "@/basa/api";
import { addUrlPerFix } from "@/basa/utils";
export default {
  props: {
    finStorageList: {
      type: Array
    }
  },
  components: { stockInOrder },
  computed: {
    pickerOptions1() {
      let that = this;
      return {
        disabledDate: function (time) {
          if (that.form.replyDate) {
            return time.getTime() > new Date(that.form.replyDate).getTime();
          } else {
            return false;
          }
        }
      };
    },
    pickerOptions2() {
      let that = this;
      return {
        disabledDate: function (time) {
          if (that.form.declareDate) {
            return time.getTime() < new Date(that.form.declareDate).getTime();
          } else {
            return false;
          }
        }
      };
    }
  },
  watch: {},
  data() {
    return {
      form: {
        reportInOrgId: 0,
        writeoffReason: "", //冲销原因
        reportInOrgName: "", //填报单位
        supplierName: "", //供应商
        writeoffCode: "", //冲销单编号
        writeroffName: "", //冲销单名称
        storageCode: "", //入库单编号
        storageName: "", //入库单名称
        settlementCode: "", //结算单编号
        settlementName: "", //结算单名称
        warehouseName: "", //仓库
        warehouseId: "", //仓库ID
        materialForm: "", //物资来源
        storageCount: "", //入库数量
        storageMoney: "", //入库金额
        storageType: "", // 入库类型
        writeoffMoney: "", // 冲销金额
        writeoffCount: "", //冲销数量
        reportTime: "", //编制日期
        reportUsername: "", //编制人
        thirdCategoriesOfName: "",
        remark: "", //备注
        
        department: "", // 所属部门
        departCode: "", // 所属部门4A编码
        departmentId: "", // 所属部门ID
        departmentOrgId: "", // 所属部门单位ID
        valoremMethodCode: "", // 计税方法编码
        valoremMethod: "", // 计税方法
        businessReasons: "", // 业务事由
        writeOffType: "", // 冲销类型
        writeOffTypeCode: "", // 冲销类型编码
        standardMoneyCode: "", // 本位币编码
        standardMoney: "", // 本位币名称
      },
      priceFillingMethodType: "", // 合同清单 - 计算使用
      taxNumber: "", // 税率 合同清单 - 计算使用
      rules: {
        writeoffReason: [
          { required: true, message: "请输入冲销原因", trigger: "blur" }
        ],
        writeoffCode: [
          { required: true, message: "请输入冲销单编号", trigger: "blur" }
        ],
        writeroffName: [
          { required: true, message: "请输入冲销单名称", trigger: "blur" }
        ],
        storageCode: [
          { required: true, message: "请选择入库单编号", trigger: "blur" }
        ],
        department: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
        valoremMethod: [
          { required: true, message: "请输入计税方式", trigger: "blur" },
        ],
        standardMoney: [
          { required: true, message: "请输入本位币币种", trigger: "blur" },
        ],
        businessReasons: [
          { required: true, message: "请输入业务事由", trigger: "blur" },
        ],
        writeOffType: [
          { required: true, message: "请输入冲销类型", trigger: "blur" },
        ]
      },
      tableData: [],
      fileList: [],
      reportOptions: [] //填报单位
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    oninput(num) {
      //      debugger
      //正则替换
      //后来调试发现这个函数只能用于字符串，当是数字的时候就会报此错误
      var str = num.toString();
      str = str.replace(/[^\d.]/g, ""); // 保留数字   /[^\d.]/g, ""
      str = str.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      str = str.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      console.log("input值", str);
      return str;
    },
    getblur(declareAmount) {
      this.form.declareAmount = this.calculateFilter(declareAmount);
    },
    // 金额四舍五入
    calculateFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 9);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    handleOrgTree() {
      console.log("选择");
      this.$refs["brachFormVisible"].dialogVisible = true;
    },
    //变更策划编码
    planCode(val) {
      console.log(val);
      this.$set(this.form, "planId", val.planId);
      this.$set(this.form, "planCode", val.planCode);
    },
    getUserInfo() {
      console.log("getUserInfo");
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then(res => {
        this.form.compileUser = res.data.data.userInfo.name;
        this.userOpenId = res.data.data.userInfo.openId;
        // this.form.reportOpenid = res.data.data.userInfo.openId;
        this.form.reportUsername = res.data.data.userInfo.name;
        this.getReportInOrgData(res.data.data.userInfo.openId);
      });
    },
    // 填报单位
    changeReportInOrgId(val) {
      const tempObj = this.reportOptions.find(e => e.name === val);
      this.form.reportInOrgId = tempObj.orgId;
      this.form.reportInOrgName = tempObj.name;

      // 改变填报单位清空 数据
      this.form.storageCode = "";
      this.form.storageName = "";
      this.form.settlementCode = "";
      this.form.settlementName = "";
      this.form.supplierName = "";
      this.form.warehouseName = "";
      this.form.storageCount = "";
      this.form.storageMoney = "";
      this.form.writeoffMoney = "";
      this.form.writeoffCount = "";
      this.tableData = [];
      this.$emit("updataList", this.tableData);
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    // 填报信息
    getReportInOrgData(openId) {
      getReportInOrgData({ openIds: [openId] }).then(res => {
        this.reportOptions = res.data.data[openId];
        this.form.reportInOrgName =
          this.form.reportInOrgName || this.reportOptions[0].name;
        this.form.reportInOrgId =
          this.form.reportInOrgId || this.reportOptions[0].orgId;
      });
    },
    // 选择返回数据
    codeNumberInventoryConfirm(data) {
      this.form.storageId = data.id;

      this.form.contractId = data.contractId;
      this.form.contractName = data.contractName;
      this.form.contractCode = data.contractCode;
      this.form.supplierName = data.supplierName;
      this.form.supplierCode = data.supplierCode;
      this.form.supplierId = data.supplierId;

      this.form.reportInOrgName = data.reportInOrgName;
      this.form.storageCode = data.storageCode;
      this.form.storageName = data.storageName;
      this.form.settlementId = data.settlementId;
      this.form.settlementCode = data.settlementCode;
      this.form.settlementName = data.settlementName;
      this.form.warehouseName = data.warehouseName;
      this.form.warehouseId = data.warehouseId;
      this.form.materialForm = data.materialForm;

      this.form.department = data.department; // 所属部门
      this.form.departCode = data.departCode; // 所属部门4A编码
      this.form.departmentId = data.departmentId; // 所属部门ID
      this.form.departmentOrgId = data.departmentOrgId; // 所属部门单位ID
      this.form.valoremMethodCode = data.valoremMethodCode; // 计税方法编码
      this.form.valoremMethod = data.valoremMethod; // 计税方法
      this.form.businessReasons = data.businessReasons; // 业务事由
      this.form.writeOffType = data.writeOffType; // 冲销类型
      this.form.writeOffTypeCode = data.writeOffTypeCode; // 冲销类型编码
      this.form.standardMoneyCode = data.standardMoneyCode; // 本位币编码
      this.form.standardMoney = data.standardMoney; // 本位币名称
      // 入库数量
      this.count = data.storageCount.toFixed(3);
      this.form.storageCount = data.storageCount.toFixed(3);
      this.form.storageMoney = data.storageMoney.toFixed(2);
      this.form.storageType = null;
      this.form.materialSources = data.materialSources;
      this.form.writeoffCount = (-1 * +data.storageCount).toFixed(3);
      this.form.writeoffMoney = (-1 * +data.storageMoney).toFixed(2);
      this.form.thirdCategoriesOfName = data.thirdCategoriesOfName;
      this.tableData = [];
      getFinStorageById({
        ids: [data.id]
      }).then(res => {
        if (res.data.data.finStorageList.length > 0) {
          res.data.data.finStorageList.forEach(item => {
            item.storageListId = item.id;
            if (+item.isOtherCost != 1 && +item.isServices != 1) {
              item.unitPriceWithTax = (+item.unitPriceWithTax).toFixed(2);
              item.writeoffCount = (-1 * +item.storageCount).toFixed(3);
            } else {
              item.unitPriceWithTax = "";
              item.writeoffCount = "";
            }

            item.moneyWithTax = (-1 * +item.moneyWithTax).toFixed(2);
            item.moneyWithoutTax = (-1 * +item.moneyWithoutTax).toFixed(2);
            if (+item.isOtherCost == 1 || +item.isServices == 1) {
              if (item.relationList && item.relationList.length > 0) {
                let newList = [];
                item.relationList.forEach(val => {
                  val.pkPurmatdetl = val.id;
                  newList.push(val.storageCode);
                });
                item.relationCode = newList.join(",");
              } else {
                item.relationCode = "";
              }
            }
            this.tableData.push(item);
          });
        }
      });
      this.$emit("updataList", this.tableData);
    },
    // input 输入框去掉空格
    handleTrim(key) {
      this.$set(this.form, key, this.form[key].replace(/(^\s*)|(\s*)$/g, ""));
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-input {
  width: 260px;
}

/deep/ .el-button--single-number {
  width: 46px;
  margin-left: 10px;
  padding: 0 9px;
}
/deep/.ccui-pre-form-item {
  .el-form-item__label {
    line-height: 16px;
  }
}
/deep/.el-col-12 {
  width: 50%;
}
/deep/.el-col-13 {
  width: 100%;
}
/deep/.el-textarea {
  // width:65%;
  width: 760px;
}

.remarkClass {
  width: calc(50% + 343px);
}
/deep/.el-col-20 {
  display: flex;
}
/deep/.el-col-17 {
  width: 260px;
  margin-right: 5px;
}
::v-deep {
  .el-input input {
    padding-right: 50px;
  }
}
</style>
